<template>
  <div>
    <ul id="items">
      <li :key="i" v-for="(item, i) in list">{{ item }}</li>
    </ul>
    <button @click="onClick">onClick</button>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      list: ["test1", "test2", "test3", "test4"],
      change: "3",
      list1: [],
    };
  },
  mounted() {
    this.test();
  },
  methods: {
    test() {
      let el = document.getElementById("items");
      const that = this;
      const list1 = JSON.parse(JSON.stringify(that.list));
      Sortable.create(el, {
        animation: 150,
        ghostClass: "blue-background-class",
        onEnd({ newIndex, oldIndex }) {
          console.log(newIndex, oldIndex);
          // console.log(that.stepList.data);
          //   const targetRow =list1.splice(oldIndex, 1)[0];
          //   console.log(targetRow);
          list1.splice(newIndex, 0, list1.splice(oldIndex, 1)[0]);
          // console.log(that.$refs.cTable.tableData);
          console.log(list1);
          console.log(that.list);
        },
      });
    },
    onClick() {
      let chang1 = this.change;
      chang1 = "5";
      console.log(chang1);
      console.log(this.change);
    },
  },
};
</script>
